<template>
  <a-card :title="t('数据表信息')" size="small">
    <a-form :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
      <a-form-item :label="t('数据表名称')" v-bind="validateInfos.tableName">
        <a-input
          v-model:value="modelRef.tableName"
          :placeholder="t('请输入数据表名称')"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item :label="t('数据表编码')" v-bind="validateInfos.tableCode">
        <a-input
          v-model:value.trim="modelRef.tableCode"
          :placeholder="t('请输入数据表编码')"
          @change="handleUpperCase"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item :label="t('数据表状态')" v-bind="validateInfos.tableStatus">
        <a-switch
          v-model:checked="modelRef.tableStatus"
          checked-value="Y"
          un-checked-value="N"
          :checked-children="t('有效')"
          :un-checked-children="t('无效')"
        ></a-switch>
      </a-form-item>
      <a-form-item :label="t('发布状态')" v-bind="validateInfos.publishStatus">
        <a-select
          :value="modelRef.publishStatus"
          :options="[
            { label: () => t('已发布'), value: 'Y' },
            { label: () => t('未发布'), value: 'N' },
          ]"
          disabled
        ></a-select>
      </a-form-item>
      <a-form-item :label="t('数据表描述')">
        <a-textarea
          v-model:value="modelRef.tableDesc"
          :placeholder="t('请输入数据表描述')"
          :rows="2"
          allow-clear
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script lang="ts" setup>
import { Form } from "ant-design-vue";
import { reactive, watch } from "vue";
import type { FormRule } from "@/typing";
import type { QueryResult, TableInfo } from "@/api/low-code/table/typing";
import { pick } from "lodash";
import { useI18n } from "vue-i18n";

interface Props {
  /**行数据 */
  model: QueryResult;
  /**弹窗 */
  open: boolean;
}
const props = defineProps<Props>();
const { t } = useI18n();
const initValue = (): TableInfo => ({
  tableId: null,
  tableName: null,
  tableCode: null,
  tableDesc: null,
  tableStatus: null,
  publishStatus: "N",
});
const modelRef = reactive(initValue());
const modelRule = reactive<FormRule<TableInfo>>({
  tableName: [{ required: true, message: () => t("请输入数据表名称") }],
  tableCode: [{ required: true, message: () => t("请输入数据表编码") }],
});
const { validate, validateInfos, resetFields } = Form.useForm(
  modelRef,
  modelRule
);
/**数据表编码转大写 */
const handleUpperCase = () => {
  modelRef.tableCode = modelRef.tableCode.toUpperCase();
};
watch(
  [() => props.model, () => props.open],
  ([model]) => {
    resetFields(pick(model || initValue(), Object.keys(modelRef)));
  },
  { immediate: true }
);
defineExpose({ validate, modelRef });
</script>
